<template>
  <div class="header-menu-item" @mouseleave="() => { isShow = false }">
    <a href="javascript:;" class="link" @mouseover="() => { isShow = true }">手机版</a>
    <div class="dorpdown-box center" v-show="isShow">
      <span class="title">APP客户端</span>
      <img src="/static/img/qrcode-phone.png" alt="手机客户端下载">
      <span>iOS • Android</span>
    </div>
  </div>
</template>

<script>
import './headerMenuItem.scss'

export default {
  name: 'phone',
  data () {
    return {
      isShow: false
    }
  }
}

</script>

<style lang="scss" scoped>
  .dorpdown-box {
    width: 150px;
    img {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    span {
      display: block;
      width: 100%;
      text-align: center;
      line-height: 1em;
      color: #AFAFAF;
      &.title {
        font-weight: 700;
        margin-bottom: 10px;
      }
    }
  }
</style>
